<template>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <el-button size="mini" type="primary" @click="dialogFormVisible = true">添加角色</el-button>
            </el-col>

            <el-col :span="24" style="margin-top:20px;">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        prop="date"
                        label="日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="province"
                        label="省份"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="city"
                        label="市区"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="address"
                        label="地址"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="zip"
                        label="邮编"
                        width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="启用状态" >
                        <template slot-scope="scope">
                            <el-tooltip
                                :content="scope.row.status ? '启用' : '封禁'"
                                placement="top"
                            >
                                <el-switch
                                :value="scope.row.status"
                                :active-value="1"
                                :inactive-value="0" 
                                @change="switchChange($event,scope.row,scope.$index)"    
                                >
                                </el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="100">
                    <template align="center" slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button class="text-red" @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 添加账号 -->
        <el-dialog title="新增/编辑账号" width="80%" :visible.sync="dialogFormVisible">
            <el-form class="inlineForm" size="mini" :model="form" :rules="rules" inline label-position="left"  :label-width="formLabelWidth">
                <el-form-item label="角色名称" prop="name" >
                  <el-input v-model="form.name" placeholder="请输入角色名称" clearable autocomplete="off"  show-word-limit></el-input>
                </el-form-item>
                <el-form-item prop="desc" label="角色描述">
                    <el-input type="textarea" v-model="form.desc" placeholder="请输入角色描述"></el-input>
                </el-form-item>
                <el-form-item prop="power" label="角色权限">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :props="defaultProps"
                        @check-change="handleCheckChange"
                    >
                    </el-tree>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary"  >保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name:'setting_role',
    data() {
        return {
            dialogFormVisible:false,
            formLabelWidth:"80px",
            form: {
                name:'',
                desc:'',
                power:[]
            },
            rules:{
                name:[ { required: true, message: '请输入角色名称', trigger: 'blur' } ],
                desc:[ { required: true, message: '请输入角色描述', trigger: 'blur' } ],
                power:[{ type:'array', required:true , message:'请选择角色权限', trigger:'change' }]
            },
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    status:1
                }
            ],
            data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }    
        }
    },
    methods:{
        handleClick(row) {
            console.log(row);
        },

        handleCheckChange(data, checked, indeterminate) {
            this.form.power = this.$refs.tree.getCheckedNodes()
        },
    }
}
</script>

<style lang="scss" scoped>
.content{
    .text-red{
        color:$red;
    }
    .inlineForm{
        .el-form-item{
            width: 100%;
            ::v-deep .el-input{
                width: 40vw;
            }
            ::v-deep .el-textarea{
                width: 40vw;
            }
        }
    }
}
</style>